import React from 'react'
import Card from './ui/Card'
import Button from './ui/Button'
import '../styles/CardDemo.css'

function CardDemo() {
  const handleCardClick = (cardType) => {
    alert(`点击了 ${cardType} 卡片！`)
  }

  return (
    <div className="card-demo">
      <h1>🃏 Card 组件演示</h1>
      
      <div className="demo-sections">
        {/* 基本卡片 */}
        <section className="demo-section">
          <h2>📝 基本卡片</h2>
          <div className="card-examples">
            <Card title="基本卡片" subtitle="这是一个基本的卡片组件">
              <p>这是卡片的内容区域。您可以在这里放置任何内容，包括文本、图片、按钮等。</p>
            </Card>
            
            <Card 
              title="可点击卡片" 
              subtitle="点击我试试"
              onClick={() => handleCardClick('可点击')}
            >
              <p>这个卡片可以点击，会触发点击事件。</p>
            </Card>
          </div>
        </section>

        {/* 卡片变体 */}
        <section className="demo-section">
          <h2>🎨 卡片变体</h2>
          <div className="card-grid">
            <Card 
              title="主要卡片" 
              subtitle="Primary variant"
              variant="primary"
            >
              <p>使用 <code>variant="primary"</code> 的主要卡片样式。</p>
            </Card>
            
            <Card 
              title="次要卡片" 
              subtitle="Secondary variant"
              variant="secondary"
            >
              <p>使用 <code>variant="secondary"</code> 的次要卡片样式。</p>
            </Card>
            
            <Card 
              title="成功卡片" 
              subtitle="Success variant"
              variant="success"
            >
              <p>使用 <code>variant="success"</code> 的成功卡片样式。</p>
            </Card>
            
            <Card 
              title="警告卡片" 
              subtitle="Warning variant"
              variant="warning"
            >
              <p>使用 <code>variant="warning"</code> 的警告卡片样式。</p>
            </Card>
            
            <Card 
              title="危险卡片" 
              subtitle="Danger variant"
              variant="danger"
            >
              <p>使用 <code>variant="danger"</code> 的危险卡片样式。</p>
            </Card>
          </div>
        </section>

        {/* 卡片内容 */}
        <section className="demo-section">
          <h2>📄 卡片内容</h2>
          <div className="card-examples">
            <Card title="文本内容" subtitle="包含各种文本元素">
              <h3>标题</h3>
              <p>这是一个段落，包含一些文本内容。</p>
              <p>这是另一个段落，展示了卡片内容的多样性。</p>
              
              <h4>列表</h4>
              <ul>
                <li>列表项目 1</li>
                <li>列表项目 2</li>
                <li>列表项目 3</li>
              </ul>
              
              <h4>代码</h4>
              <pre><code>{`function Card({ children, title }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      {children}
    </div>
  )
}`}</code></pre>
            </Card>
            
            <Card title="交互元素" subtitle="包含按钮和其他交互元素">
              <p>这个卡片包含了一些交互元素：</p>
              
              <div className="card-actions">
                <Button variant="primary">主要按钮</Button>
                <Button variant="secondary">次要按钮</Button>
                <Button variant="outline">轮廓按钮</Button>
              </div>
              
              <p>您可以在卡片中添加任何 React 组件。</p>
            </Card>
          </div>
        </section>

        {/* 卡片布局 */}
        <section className="demo-section">
          <h2>🏗️ 卡片布局</h2>
          <div className="layout-examples">
            <div className="layout-section">
              <h3>网格布局</h3>
              <div className="card-grid">
                <Card title="网格卡片 1" subtitle="Grid layout">
                  <p>这是网格布局中的第一个卡片。</p>
                </Card>
                <Card title="网格卡片 2" subtitle="Grid layout">
                  <p>这是网格布局中的第二个卡片。</p>
                </Card>
                <Card title="网格卡片 3" subtitle="Grid layout">
                  <p>这是网格布局中的第三个卡片。</p>
                </Card>
              </div>
            </div>
            
            <div className="layout-section">
              <h3>列表布局</h3>
              <div className="card-list">
                <Card title="列表卡片 1" subtitle="List layout">
                  <p>这是列表布局中的第一个卡片。</p>
                </Card>
                <Card title="列表卡片 2" subtitle="List layout">
                  <p>这是列表布局中的第二个卡片。</p>
                </Card>
                <Card title="列表卡片 3" subtitle="List layout">
                  <p>这是列表布局中的第三个卡片。</p>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* 特殊样式 */}
        <section className="demo-section">
          <h2>✨ 特殊样式</h2>
          <div className="card-examples">
            <Card 
              title="高架卡片" 
              subtitle="Elevated style"
              className="card-elevated"
            >
              <p>使用 <code>className="card-elevated"</code> 的高架卡片样式。</p>
            </Card>
            
            <Card 
              title="圆角卡片" 
              subtitle="Rounded style"
              className="card-rounded"
            >
              <p>使用 <code>className="card-rounded"</code> 的圆角卡片样式。</p>
            </Card>
            
            <Card 
              title="扁平卡片" 
              subtitle="Flat style"
              className="card-flat"
            >
              <p>使用 <code>className="card-flat"</code> 的扁平卡片样式。</p>
            </Card>
            
            <Card 
              title="边框卡片" 
              subtitle="Bordered style"
              className="card-bordered"
            >
              <p>使用 <code>className="card-bordered"</code> 的边框卡片样式。</p>
            </Card>
          </div>
        </section>

        {/* 使用示例 */}
        <section className="demo-section">
          <h2>💡 使用示例</h2>
          <div className="usage-examples">
            <Card title="产品卡片" subtitle="Product Card Example">
              <div className="product-card">
                <div className="product-image">
                  <div className="image-placeholder">📱</div>
                </div>
                <div className="product-info">
                  <h3>智能手机</h3>
                  <p className="price">¥2999</p>
                  <p className="description">高性能智能手机，配备最新处理器和摄像头系统。</p>
                  <div className="product-actions">
                    <Button variant="primary">立即购买</Button>
                    <Button variant="outline">加入购物车</Button>
                  </div>
                </div>
              </div>
            </Card>
            
            <Card title="用户信息卡片" subtitle="User Profile Card">
              <div className="user-card">
                <div className="user-avatar">
                  <div className="avatar-placeholder">👤</div>
                </div>
                <div className="user-info">
                  <h3>张三</h3>
                  <p className="user-role">前端开发工程师</p>
                  <p className="user-bio">热爱编程，专注于 React 和现代前端技术。</p>
                  <div className="user-stats">
                    <div className="stat">
                      <span className="stat-number">42</span>
                      <span className="stat-label">项目</span>
                    </div>
                    <div className="stat">
                      <span className="stat-number">128</span>
                      <span className="stat-label">贡献</span>
                    </div>
                    <div className="stat">
                      <span className="stat-number">5</span>
                      <span className="stat-label">年经验</span>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </section>
      </div>
    </div>
  )
}

export default CardDemo 